<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">

        <!-- 1.输入文本框 -->
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
        <input type="text" value="msg" @input="msg=$event.target.value"/>
        <hr>
        <!-- 
            2、单选按钮
            v-model对于单选按钮绑定的是 change 事件 
            v-model 在完成单选按钮绑定是，如果多个单选按钮绑定同一个数据变量，默认形成分组
            v-model 绑定的单选按钮如果没有提供 value 属性值，默认表示该单选按钮无值返回 null
        -->
        <input type="radio" value="a" v-model="radioData">
        <input type="radio" value="b" v-model="radioData">
        <p>{{radioData}}</p>
        <input type="radio" value="a" :checked="radioData1=='a'" @change="radioData1=$event.target.value">
        <input type="radio" value="b" :checked="radioData1=='b'" @change="radioData1=$event.target.value">
        <p>{{radioData1}}</p>
        <hr>
          <!-- 
            3、复选按钮
            v-model 在绑定复选按钮时，提供两个默认值 true:表示被选中，false:表示没有被选中
                    默认值可以通过 true-value="是" false-value="否" 进行修改
            v-model 通过同一个变量绑定多个复选按钮时，默认形成同组效果
            v-model 在完成复选按钮绑定时，根据v-model取值类型完成值的记录和状态记录的切换
                a、取值为非数组时，只记录状态，此时value无效
                b、取值为数组时，记录选择的值，值为选择标签的 value 属性
                    * 且标签没有提供value属性时，默认值为 null
                    * 数组记录的复选按钮值是无序的
        -->
        <p>{{checkData1}}</p>
        <input type="checkbox" v-model="checkData1">
        <p>{{checkData2}}</p>
        <input type="checkbox" true-value="是" false-value="否" v-model="checkData2">
        <p>{{checkData3}}</p>
        <input type="checkbox" value="a" v-model="checkData3">
        <input type="checkbox" value="b" v-model="checkData3">
        <hr>
        <input type="checkbox" :checked="checkData4" @change="checkData4=$event.target.checked"/>
        <hr>
        <input type="checkbox" value="a" :checked="checkData5.indexOf('a')>=0" @change="changeBox($event)">
        <input type="checkbox" value="b" :checked="checkData5.indexOf('b')>=0" @change="changeBox($event)">
        <!-- 
            4、下拉列表
                * option标签仅用于为select 提供选择项支持，并提供取值value或者取值textContent
                * option 的 selected 仅为页面开发时的 下拉列表选择操作属性
                * JS 中对于 下拉列表的操作都是在完成 select 标签的 value 属性操作
                *    select 的value 属性会记录被选中的option提供的值，同时也会作为判断依据描述哪个option被选中
            v-model 绑定下拉列表只能在 select 标签上定义
        -->
        <p>{{selectData1}}</p>
        <select name="" id="" v-model="selectData1">
            <option value="1">asdaas</option>
            <option >asdas</option>
            <option>as<h1>哈哈</h1>das</option>
            <option value="4">asdas</option>
        </select>
        <select name="" id="" :value="selectData2" @change="selectData2=$event.target.value">
            <option value="1">asdaas</option>
            <option >asdas</option>
            <option>as<h1>哈哈</h1>das</option>
            <option value="4">asdas</option>
        </select>
        <select name="" id="" @change="show">
            <option value="1">asdaas</option>
            <option >asdas</option>
            <option>as<h1>哈哈</h1>das</option>
            <option value="4">asdas</option>
        </select>
        <hr>
        <!--
            5、多行文本框
                * HTML 的textarea 标签属性上不存在 value 属性，因此在页面开发时，以标签中的内容定义默认值
                * js操作时 textarea Dom 通过 value记录用户输入值和取值操作
            v-model 完成 textarea 标签的双向数据绑定，也只对DOM的value属性进行操作
        --> 
        <p>{{info}}</p>
        <textarea name="" id="tex" cols="30" rows="10" value="1" >asdasd</textarea>
        <textarea cols="30" rows="10" v-model="info"></textarea>
        <textarea name="" id="" cols="30" rows="10" :value="info" @input="info=$event.target.value">asdas</textarea>
        
        <!-- 
            6、<input type="file"> 文件选择器标签
                * 文件选择标签，在HTML中仅用于记录选择文件的本地地址
            v-model 不能绑定文件选择标签
        -->
        <hr>
        <img :src="path" alt="">
        <input type="file" id="file" @change="chooseFile($event)">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"测试变量",
            radioData:"",
            radioData1:"",
            checkData1:"",
            checkData2:"",
            checkData3:[],
            checkData4:"",
            checkData5:[],
            selectData1:"",
            selectData2:"",
            info:"",
            file:"",
            path:null
        },
        methods: {
            changeBox(e){
                if(e.target.checked){
                    this.checkData5.push(e.target.value);
                }else{
                    let i = this.checkData5.indexOf(e.target.value);
                    this.checkData5.splice(i,1);
                }
            },
            show(e){
                console.log(e.target.value);
                
            },
            showValue(e){
                console.log(e.target.value);
            },
            chooseFile(e){
                //本地地址，因为安全考虑 浏览器不允许读取系统本地地址
                // console.log(e.target.value);
                
                // console.log(e.target.files[0]);
                this.file=e.target.files[0];
                let read=new FileReader();// 该对象可以读取被JS加载的文件对象数据
                read.readAsDataURL(this.file); // 完成对内存中的文件进行读取 （异步方法）
                read.onload=()=>{
                    // console.log(read.result);// 得到文件的 base64值
                    this.path=read.result;
                }
                
            }
        },
    });

    let textDom=document.getElementById("tex");
    //输出的Dom的value值为标签之间的内容
    console.log(textDom.value);
</script>
</html>